<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线咨询 - 小笑舒压</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 414px;
            margin: 0 auto;
            background: #fff;
            min-height: 100vh;
            position: relative;
        }

        /* 顶部导航 */
        .top-nav {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .back-btn {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            margin-right: 15px;
        }

        .page-title {
            font-size: 18px;
            font-weight: 600;
        }

        /* 搜索区域 */
        .search-section {
            background: white;
            padding: 20px;
            border-bottom: 1px solid #eee;
        }

        .search-box {
            position: relative;
            margin-bottom: 15px;
        }

        .search-input {
            width: 100%;
            padding: 12px 45px 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 25px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .search-input:focus {
            border-color: #667eea;
        }

        .search-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }

        .filter-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .filter-tag {
            padding: 6px 12px;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 15px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .filter-tag.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        /* 咨询列表 */
        .consult-list {
            padding: 20px;
            padding-bottom: 100px;
        }

        .consult-item {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #f0f0f0;
            transition: transform 0.3s ease;
        }

        .consult-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        }

        .consult-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .consult-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
        }

        .consult-info {
            flex: 1;
        }

        .consult-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .consult-category {
            font-size: 14px;
            color: #666;
            margin-bottom: 3px;
        }

        .consult-severity {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .severity-indicator {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
        }

        .severity-low {
            background: #d4edda;
            color: #155724;
        }

        .severity-medium {
            background: #fff3cd;
            color: #856404;
        }

        .severity-high {
            background: #f8d7da;
            color: #721c24;
        }



        .consult-content {
            margin-bottom: 15px;
        }

        .consult-description {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
            margin-bottom: 10px;
        }

        .consult-symptoms {
            margin-top: 10px;
        }

        .consult-symptoms strong {
            font-size: 13px;
            color: #333;
            margin-bottom: 8px;
            display: block;
        }

        .symptom-tag {
            display: inline-block;
            padding: 3px 8px;
            background: #f0f8ff;
            color: #667eea;
            border-radius: 12px;
            font-size: 11px;
            margin: 2px 4px 2px 0;
        }

        .consult-actions {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: #f8f9fa;
            color: #666;
            border: 1px solid #e0e0e0;
        }

        .btn-secondary:hover {
            background: #e9ecef;
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 414px;
            background: white;
            border-top: 1px solid #eee;
            display: flex;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }

        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: color 0.3s ease;
            color: #999;
        }

        .nav-item.active {
            color: #667eea;
        }

        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
            display: block;
        }

        .nav-item span {
            font-size: 12px;
        }



        /* 底部弹框样式 */
        .bottom-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 1000;
        }

        .bottom-modal {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 414px;
            background: white;
            border-radius: 20px 20px 0 0;
            padding: 25px;
            box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.3s ease-out;
            max-height: 80vh;
            overflow-y: auto;
        }

        @keyframes slideUp {
            from {
                transform: translateX(-50%) translateY(100%);
            }

            to {
                transform: translateX(-50%) translateY(0);
            }
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .close-btn:hover {
            background: #f0f0f0;
            color: #666;
        }

        .modal-content {
            margin-bottom: 20px;
        }

        .content-section {
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 8px;
            color: #667eea;
        }

        .section-content {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
        }

        .solution-list {
            list-style: none;
            padding: 0;
        }

        .solution-item {
            background: #f8f9fa;
            padding: 12px 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
            display: flex;
            align-items: center;
        }

        .solution-number {
            background: #667eea;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .solution-text {
            flex: 1;
        }

        .tips-box {
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
            padding: 15px;
            border-radius: 12px;
            border-left: 4px solid #f39c12;
        }

        .tips-title {
            font-weight: 600;
            color: #856404;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .tips-title i {
            margin-right: 8px;
        }

        .tips-content {
            color: #856404;
            font-size: 14px;
            line-height: 1.5;
        }

        /* 响应式设计 */
        @media (max-width: 375px) {
            .consult-item {
                padding: 16px;
            }

            .consult-icon {
                width: 45px;
                height: 45px;
            }

            .bottom-modal {
                padding: 20px;
            }
        }

        /* 回到顶部按钮 */
        .back-to-top {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            transition: all 0.3s ease;
            z-index: 999;
        }

        .back-to-top:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .back-to-top:active {
            transform: translateY(-1px);
        }

        .back-to-top.show {
            display: flex;
            animation: fadeInUp 0.3s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <button class="back-btn" onclick="goBack()">
                <i class="fas fa-arrow-left"></i>
            </button>
            <div class="page-title">离线咨询</div>
        </div>

        <!-- 搜索区域 -->
        <div class="search-section">
            <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索心理问题..." id="searchInput">
                <i class="fas fa-search search-icon"></i>
            </div>
            <div class="filter-tags">
                <span class="filter-tag active" onclick="filterByTag('all', this)">全部</span>
                <span class="filter-tag" onclick="filterByTag('anxiety', this)">焦虑</span>
                <span class="filter-tag" onclick="filterByTag('depression', this)">抑郁</span>
                <span class="filter-tag" onclick="filterByTag('stress', this)">压力</span>
                <span class="filter-tag" onclick="filterByTag('relationship', this)">情感</span>
                <span class="filter-tag" onclick="filterByTag('work', this)">职场</span>
            </div>
        </div>

        <!-- 咨询列表 -->
        <div class="consult-list" id="consultList">
            <!-- 咨询问题将通过JavaScript动态生成 -->
        </div>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <div class="nav-item" onclick="switchTab('test')">
                <i class="fas fa-clipboard-check"></i>
                <span>测试</span>
            </div>
            <div class="nav-item active" onclick="switchTab('consult')">
                <i class="fas fa-comments"></i>
                <span>咨询</span>
            </div>
            <div class="nav-item" onclick="switchTab('relax')">
                <i class="fas fa-gamepad"></i>
                <span>放松</span>
            </div>
            <div class="nav-item" onclick="switchTab('profile')">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </nav>
    </div>

    <!-- 底部弹框 -->
    <div class="bottom-modal-overlay" id="bottomModal">
        <div class="bottom-modal" id="bottomModalContent">
            <!-- 弹框内容将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button class="back-to-top" id="backToTop" onclick="scrollToTop()" title="回到顶部">
        <i class="fas fa-arrow-up"></i>
    </button>


    <script>
        // 咨询问题数据
        const consultData = [
            {
                id: 1,
                title: "工作压力过大怎么办？",
                category: "work",
                severity: "high",
                description: "最近工作压力很大，经常加班到很晚，感觉身心疲惫，不知道如何调节...",
                symptoms: ["失眠", "焦虑", "疲惫", "注意力不集中"],
                solutions: [
                    "制定合理的工作计划，避免拖延",
                    "学会说'不'，不要承担过多责任",
                    "培养工作外的兴趣爱好",
                    "练习深呼吸和冥想放松技巧",
                    "与同事和上级沟通工作分配问题"
                ],
                tips: "记住，工作只是生活的一部分，健康才是最重要的。",
                icon: "💼"
            },
            {
                id: 2,
                title: "总是感到焦虑不安",
                category: "anxiety",
                severity: "medium",
                description: "最近总是感到莫名的焦虑，担心各种事情，晚上睡不好觉...",
                symptoms: ["过度担心", "睡眠问题", "心跳加快", "坐立不安"],
                solutions: [
                    "练习腹式呼吸，每天3次，每次5分钟",
                    "写焦虑日记，记录具体担心的事情",
                    "限制咖啡因和酒精摄入",
                    "规律运动，如散步、瑜伽",
                    "寻求专业心理咨询师帮助"
                ],
                tips: "焦虑是正常的情绪反应，学会接纳它，而不是对抗它。",
                icon: "😰"
            },
            {
                id: 3,
                title: "人际关系处理困难",
                category: "relationship",
                severity: "medium",
                description: "不知道如何与同事相处，经常感到被孤立，害怕社交场合...",
                symptoms: ["社交恐惧", "自卑", "孤独感", "沟通困难"],
                solutions: [
                    "从小事开始练习社交，如主动打招呼",
                    "培养同理心，学会倾听他人",
                    "参加兴趣小组或社交活动",
                    "学习沟通技巧和表达方式",
                    "建立健康的边界感"
                ],
                tips: "良好的人际关系需要时间和耐心来培养。",
                icon: "👥"
            },
            {
                id: 4,
                title: "情绪低落，缺乏动力",
                category: "depression",
                severity: "high",
                description: "最近情绪很低落，对什么都提不起兴趣，感觉生活没有意义...",
                symptoms: ["情绪低落", "兴趣丧失", "精力不足", "自我否定"],
                solutions: [
                    "保持规律的作息时间",
                    "每天进行适度的运动",
                    "与信任的朋友或家人交流",
                    "尝试新的活动或学习新技能",
                    "如果持续两周以上，建议寻求专业帮助"
                ],
                tips: "情绪低落是暂时的，给自己一些时间和空间。",
                icon: "😔"
            },
            {
                id: 5,
                title: "学习压力和学习效率低",
                category: "stress",
                severity: "medium",
                description: "学习压力很大，但效率很低，经常学不进去，很焦虑...",
                symptoms: ["学习焦虑", "注意力分散", "记忆力下降", "自我怀疑"],
                solutions: [
                    "使用番茄工作法，25分钟专注学习",
                    "制定合理的学习计划和目标",
                    "创造良好的学习环境",
                    "适当休息，避免过度疲劳",
                    "找到适合自己的学习方法"
                ],
                tips: "学习是一个渐进的过程，不要给自己太大压力。",
                icon: "📚"
            },
            {
                id: 6,
                title: "睡眠质量差，经常失眠",
                category: "stress",
                severity: "medium",
                description: "经常失眠，躺在床上很久都睡不着，第二天精神很差...",
                symptoms: ["失眠", "睡眠浅", "早醒", "白天疲劳"],
                solutions: [
                    "建立规律的睡眠时间表",
                    "睡前1小时避免使用电子设备",
                    "创造舒适的睡眠环境",
                    "练习放松技巧，如渐进性肌肉放松",
                    "避免睡前摄入咖啡因和大量液体"
                ],
                tips: "良好的睡眠是身心健康的基础。",
                icon: "😴"
            }
        ];

        let currentFilter = 'all';
        let filteredData = [...consultData];

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function () {
            renderConsultList();
            setupSearch();

            // 设置遮罩层点击关闭弹框
            const modal = document.getElementById('bottomModal');
            modal.addEventListener('click', function (e) {
                if (e.target === modal) {
                    closeBottomModal();
                }
            });

            // 设置滚动监听，控制回到顶部按钮显示
            setupScrollListener();
        });

        // 设置滚动监听
        function setupScrollListener() {
            const backToTopBtn = document.getElementById('backToTop');
            
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    backToTopBtn.classList.add('show');
                } else {
                    backToTopBtn.classList.remove('show');
                }
            });
        }

        // 回到顶部功能
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // 渲染咨询列表
        function renderConsultList() {
            const consultList = document.getElementById('consultList');
            consultList.innerHTML = '';

            filteredData.forEach(consult => {
                const consultItem = createConsultItem(consult);
                consultList.appendChild(consultItem);
            });
        }

        // 创建咨询项目
        function createConsultItem(consult) {
            const item = document.createElement('div');
            item.className = 'consult-item';

            const severityClass = `severity-${consult.severity}`;
            const severityText = getSeverityText(consult.severity);

            item.innerHTML = `
                <div class="consult-header">
                    <div class="consult-icon">${consult.icon}</div>
                    <div class="consult-info">
                        <div class="consult-title">${consult.title}</div>
                        <div class="consult-category">${getCategoryText(consult.category)}</div>
                        <div class="consult-severity">
                            <span class="severity-indicator ${severityClass}">${severityText}</span>
                        </div>
                    </div>
                </div>
                <div class="consult-content">
                    <div class="consult-description">${consult.description}</div>
                    <div class="consult-symptoms">
                        <strong>常见症状：</strong>
                        ${consult.symptoms.map(symptom => `<span class="symptom-tag">${symptom}</span>`).join('')}
                    </div>
                </div>
                <div class="consult-actions">
                    <button class="action-btn btn-primary" onclick="viewSolutions(${consult.id})">
                        <i class="fas fa-lightbulb"></i>
                        查看解决方案
                    </button>
                    <button class="action-btn btn-secondary" onclick="viewDetails(${consult.id})">
                        <i class="fas fa-info-circle"></i>
                        详细信息
                    </button>
                </div>
            `;

            return item;
        }

        // 获取严重程度文本
        function getSeverityText(severity) {
            switch (severity) {
                case 'low': return '轻度';
                case 'medium': return '中度';
                case 'high': return '重度';
                default: return '未知';
            }
        }

        // 获取分类文本
        function getCategoryText(category) {
            switch (category) {
                case 'anxiety': return '焦虑问题';
                case 'depression': return '抑郁问题';
                case 'stress': return '压力问题';
                case 'relationship': return '人际关系';
                case 'work': return '职场问题';
                default: return '其他问题';
            }
        }

        // 过滤标签
        function filterByTag(tag, element) {
            // 移除所有active类
            document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
            // 添加active类到当前标签
            element.classList.add('active');

            currentFilter = tag;

            if (tag === 'all') {
                filteredData = [...consultData];
            } else {
                filteredData = consultData.filter(consult =>
                    consult.category === tag
                );
            }

            renderConsultList();
        }

        // 设置搜索功能
        function setupSearch() {
            const searchInput = document.getElementById('searchInput');
            searchInput.addEventListener('input', function () {
                const searchTerm = this.value.toLowerCase();

                if (searchTerm === '') {
                    filteredData = currentFilter === 'all' ? [...consultData] :
                        consultData.filter(consult =>
                            consult.category === currentFilter
                        );
                } else {
                    filteredData = consultData.filter(consult =>
                        consult.title.toLowerCase().includes(searchTerm) ||
                        consult.description.toLowerCase().includes(searchTerm) ||
                        consult.symptoms.some(s => s.toLowerCase().includes(searchTerm))
                    );
                }

                renderConsultList();
            });
        }

        // 查看解决方案
        function viewSolutions(consultId) {
            const consult = consultData.find(c => c.id === consultId);
            showBottomModal('solutions', consult);
        }

        // 查看详细信息
        function viewDetails(consultId) {
            const consult = consultData.find(c => c.id === consultId);
            showBottomModal('details', consult);
        }

        // 显示底部弹框
        function showBottomModal(type, consult) {
            const modal = document.getElementById('bottomModal');
            const modalContent = document.getElementById('bottomModalContent');

            if (type === 'solutions') {
                modalContent.innerHTML = `
                    <div class="modal-header">
                        <div class="modal-title">${consult.title}</div>
                        <button class="close-btn" onclick="closeBottomModal()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-content">
                        <div class="content-section">
                            <div class="section-title">
                                <i class="fas fa-lightbulb"></i>
                                解决方案
                            </div>
                            <ul class="solution-list">
                                ${consult.solutions.map((solution, index) => `
                                    <li class="solution-item">
                                        <div class="solution-number">${index + 1}</div>
                                        <div class="solution-text">${solution}</div>
                                    </li>
                                `).join('')}
                            </ul>
                        </div>
                        <div class="content-section">
                            <div class="tips-box">
                                <div class="tips-title">
                                    <i class="fas fa-heart"></i>
                                    温馨提示
                                </div>
                                <div class="tips-content">${consult.tips}</div>
                            </div>
                        </div>
                    </div>
                `;
            } else if (type === 'details') {
                modalContent.innerHTML = `
                    <div class="modal-header">
                        <div class="modal-title">${consult.title}</div>
                        <button class="close-btn" onclick="closeBottomModal()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-content">
                        <div class="content-section">
                            <div class="section-title">
                                <i class="fas fa-info-circle"></i>
                                问题描述
                            </div>
                            <div class="section-content">${consult.description}</div>
                        </div>
                        <div class="content-section">
                            <div class="section-title">
                                <i class="fas fa-exclamation-triangle"></i>
                                常见症状
                            </div>
                            <div class="section-content">
                                ${consult.symptoms.map(symptom => `<span class="symptom-tag">${symptom}</span>`).join('')}
                            </div>
                        </div>
                        <div class="content-section">
                            <div class="section-title">
                                <i class="fas fa-lightbulb"></i>
                                解决方案
                            </div>
                            <ul class="solution-list">
                                ${consult.solutions.map((solution, index) => `
                                    <li class="solution-item">
                                        <div class="solution-number">${index + 1}</div>
                                        <div class="solution-text">${solution}</div>
                                    </li>
                                `).join('')}
                            </ul>
                        </div>
                        <div class="content-section">
                            <div class="tips-box">
                                <div class="tips-title">
                                    <i class="fas fa-heart"></i>
                                    温馨提示
                                </div>
                                <div class="tips-content">${consult.tips}</div>
                            </div>
                        </div>
                    </div>
                `;
            }

            modal.style.display = 'block';
        }

        // 关闭底部弹框
        function closeBottomModal() {
            document.getElementById('bottomModal').style.display = 'none';
        }





        // 切换底部导航
        function switchTab(tabName) {
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });

            event.currentTarget.classList.add('active');

            // 这里可以添加页面切换逻辑
            console.log('切换到:', tabName);
            switch (tabName) {
                case 'test':
                    window.location.href = 'test.html';
                    break;
                case 'relax':
                    // 跳转到放松tab
                    break;
                case 'profile':
                    // 跳转到个人中心tab
                    break;
            }
        }

        // 返回首页
        function goBack() {
            window.location.href = 'index.html';
        }
    </script>
</body>

</html>